<template>
    <div class="message-box">
        <div class="message-box-head">
            <span></span>
            消息管理
        </div>
        <div class="message-box-content">
            <div class="message-box-content-left">
                <div class="message-box-content-left-child" v-if="yzyleft" @click="yzy"
                    :class="{ 'active': activeItem === 0 }">
                    <span class="closeMsg">
                        <el-icon @click="yzyMsg">
                            <Close />
                        </el-icon>
                    </span>
                    <img src="../assets/img/1.jpg" alt="">
                    <div class="message-box-content-left-right">
                        <div class="message-box-content-left-right-up">
                            <span>姚泽宇</span>
                            <span>{{ nowTime }}</span>
                        </div>
                        <div class="message-box-content-left-right-down">
                            大朗吃药了
                        </div>
                    </div>
                </div>
                <div class="message-box-content-left-child" v-if="zxyleft" @click="zxy"
                    :class="{ 'active': activeItem === 1 }">
                    <span class="closeMsg">
                        <el-icon @click="zxyMsg">
                            <Close />
                        </el-icon>
                    </span>
                    <img src="../assets/img/2.jpg" alt="">
                    <div class="message-box-content-left-right">
                        <div class="message-box-content-left-right-up">
                            <span>张晓勇</span>
                            <span>{{ nowTime }}</span>
                        </div>
                        <div class="message-box-content-left-right-down">
                            请按时吃药
                        </div>
                    </div>
                </div>
                <div class="message-box-content-left-child" v-if="wcleft" @click="wc"
                    :class="{ 'active': activeItem === 2 }">
                    <span class="closeMsg">
                        <el-icon @click="wcMsg">
                            <Close />
                        </el-icon>
                    </span>
                    <img src="../assets/img/3.jpg" alt="">
                    <div class="message-box-content-left-right">
                        <div class="message-box-content-left-right-up">
                            <span>王婵</span>
                            <span>{{ nowTime }}</span>
                        </div>
                        <div class="message-box-content-left-right-down">
                            请按时吃药
                        </div>
                    </div>
                </div>
                <div class="message-box-content-left-child" v-if="nmleft" @click="nm"
                    :class="{ 'active': activeItem === 3 }">
                    <span class="closeMsg">
                        <el-icon @click="nmMsg">
                            <Close />
                        </el-icon>
                    </span>
                    <img src="../assets/img/4.jpg" alt="">
                    <div class="message-box-content-left-right">
                        <div class="message-box-content-left-right-up">
                            <span>宁苗</span>
                            <span>{{ nowTime }}</span>
                        </div>
                        <div class="message-box-content-left-right-down">
                            请按时吃药
                        </div>
                    </div>
                </div>
                <div class="message-box-content-left-child" v-if="thdleft" @click="thd"
                    :class="{ 'active': activeItem === 4 }">
                    <span class="closeMsg">
                        <el-icon @click="thdMsg">
                            <Close />
                        </el-icon>
                    </span>
                    <img src="../assets/img/5.jpg" alt="">
                    <div class="message-box-content-left-right">
                        <div class="message-box-content-left-right-up">
                            <span>帖浩东</span>
                            <span>{{ nowTime }}</span>
                        </div>
                        <div class="message-box-content-left-right-down">
                            下次一定
                        </div>
                    </div>
                </div>
            </div>

            <!-- 姚泽宇聊天框 -->
            <div class="message-box-content-right" v-if='yzyShow'>
                <!-- 姚泽宇弹出框 -->
                <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="300" height="500">
                    <div style="display: flex;">
                        <img src="../assets/img/1.jpg"
                            style="width: 50px; height: 50px; border-radius: 10px;margin-right: 20px; border: 1px solid #999;"
                            alt="">
                        <div style="display: flex;flex-direction: column;">
                            <span>姚泽宇</span>
                            <span style="font-size: 13px; color: #2984F8;margin-top: 10px;">查看资料</span>
                        </div>
                    </div>
                    <div style="display: flex; margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 10px;">好友备注</span>
                        <input type="请输入备注" style="width: 150px; border: none;outline: none;">
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 32px;">消息置顶</span>
                        <el-switch v-model="value1" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 20px;">消息免打扰</span>
                        <el-switch v-model="value2" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                </el-drawer>
                <!-- 姚泽宇聊天内容 -->
                <div class="message-box-content-right-up">
                    <div class="message-box-content-right-up-head">
                        姚泽宇
                        <el-icon class="openDrawer" @click="drawer = true">
                            <MoreFilled />
                        </el-icon>
                    </div>
                    <div class="message-box-content-right-up-content">
                        <span>{{ nowTime }}</span>
                        <div class="message-box-content-right-up-content-one">
                            <div class="message-box-content-right-up-content-one-up">
                                <img src="../assets/img/1.jpg" alt="">
                                <div>
                                    刘医生你好，我的药还要继续喝吗
                                </div>
                            </div>
                            <div></div>
                        </div>
                        <div class="message-box-content-right-up-content-two">
                            <div></div>
                            <div class="message-box-content-right-up-content-two-down">
                                <div>药不能停</div>
                                <img src="https://cdn7.axureshop.com/demo/1881228/images/%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86/u5160.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-box-content-right-footer">
                    <el-input class="message-box-content-right-footer-textarea" style="border: none;resize: none;"
                        v-model="textarea" :rows="2" type="textarea" placeholder="请输入" />
                    <div class="message-box-content-right-footer-down">
                        <div>
                            <span>
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <ElementPlus />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>
                            </span>
                        </div>
                        <el-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>


            <!-- 张晓勇聊天框 -->
            <div class="message-box-content-right" v-if='zxyShow'>
                <!-- 张晓勇弹出框 -->
                <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="300" height="500">
                    <div style="display: flex;">
                        <img src="../assets/img/2.jpg"
                            style="width: 50px; height: 50px; border-radius: 10px;margin-right: 20px; border: 1px solid #999;"
                            alt="">
                        <div style="display: flex;flex-direction: column;">
                            <span>张晓勇</span>
                            <span style="font-size: 13px; color: #2984F8;margin-top: 10px;">查看资料</span>
                        </div>
                    </div>
                    <div style="display: flex; margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 10px;">好友备注</span>
                        <input type="请输入备注" style="width: 150px; border: none;outline: none;">
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 32px;">消息置顶</span>
                        <el-switch v-model="value3" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 20px;">消息免打扰</span>
                        <el-switch v-model="value4" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                </el-drawer>
                <!-- 张晓勇聊天内容 -->
                <div class="message-box-content-right-up">
                    <div class="message-box-content-right-up-head">张晓勇
                        <el-icon class="openDrawer" @click="drawer = true">
                            <MoreFilled />
                        </el-icon>
                    </div>
                    <div class="message-box-content-right-up-content">
                        <span>{{ nowTime }}</span>
                        <div class="message-box-content-right-up-content-one">
                            <div class="message-box-content-right-up-content-one-up">
                                <img src="../assets/img/2.jpg" alt="">
                                <div>
                                    刘医生你好，你明天有空吗
                                </div>
                            </div>
                            <div></div>
                        </div>
                        <div class="message-box-content-right-up-content-two">
                            <div></div>
                            <div class="message-box-content-right-up-content-two-down">
                                <div>没空</div>
                                <img src="https://cdn7.axureshop.com/demo/1881228/images/%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86/u5160.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-box-content-right-footer">
                    <el-input class="message-box-content-right-footer-textarea" style="border: none;resize: none;"
                        v-model="textarea" :rows="2" type="textarea" placeholder="请输入" />
                    <div class="message-box-content-right-footer-down">
                        <div>
                            <span>
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <ElementPlus />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>
                            </span>
                        </div>
                        <el-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>

            <!-- 王婵聊天框 -->
            <div class="message-box-content-right" v-if='wcShow'>
                <!-- 王婵弹出框 -->
                <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="300" height="500">
                    <div style="display: flex;">
                        <img src="../assets/img/3.jpg"
                            style="width: 50px; height: 50px; border-radius: 10px;margin-right: 20px; border: 1px solid #999;"
                            alt="">
                        <div style="display: flex;flex-direction: column;">
                            <span>王婵</span>
                            <span style="font-size: 13px; color: #2984F8;margin-top: 10px;">查看资料</span>
                        </div>
                    </div>
                    <div style="display: flex; margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 10px;">好友备注</span>
                        <input type="请输入备注" style="width: 150px; border: none;outline: none;">
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 32px;">消息置顶</span>
                        <el-switch v-model="value5" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 20px;">消息免打扰</span>
                        <el-switch v-model="value6" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                </el-drawer>
                <!-- 王婵聊天内容 -->
                <div class="message-box-content-right-up">
                    <div class="message-box-content-right-up-head">王婵
                        <el-icon class="openDrawer" @click="drawer = true">
                            <MoreFilled />
                        </el-icon>
                    </div>
                    <div class="message-box-content-right-up-content">
                        <span>{{ nowTime }}</span>
                        <div class="message-box-content-right-up-content-one">
                            <div class="message-box-content-right-up-content-one-up">
                                <img src="../assets/img/1.jpg" alt="">
                                <div>
                                    刘医生你好，我同桌感冒了我应该买点啥药
                                </div>
                            </div>
                            <div></div>
                        </div>
                        <div class="message-box-content-right-up-content-two">
                            <div></div>
                            <div class="message-box-content-right-up-content-two-down">
                                <div>可以考虑西地碘含片</div>
                                <img src="https://cdn7.axureshop.com/demo/1881228/images/%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86/u5160.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-box-content-right-footer">
                    <el-input class="message-box-content-right-footer-textarea" style="border: none;resize: none;"
                        v-model="textarea" :rows="2" type="textarea" placeholder="请输入" />
                    <div class="message-box-content-right-footer-down">
                        <div>
                            <span>
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <ElementPlus />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>
                            </span>
                        </div>
                        <el-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>

            <!-- 宁苗聊天框 -->
            <div class="message-box-content-right" v-if='nmShow'>
                <!-- 宁苗弹出框 -->
                <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="300" height="500">
                    <div style="display: flex;">
                        <img src="../assets/img/4.jpg"
                            style="width: 50px; height: 50px; border-radius: 10px;margin-right: 20px; border: 1px solid #999;"
                            alt="">
                        <div style="display: flex;flex-direction: column;">
                            <span>姚泽宇</span>
                            <span style="font-size: 13px; color: #2984F8;margin-top: 10px;">查看资料</span>
                        </div>
                    </div>
                    <div style="display: flex; margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 10px;">好友备注</span>
                        <input type="请输入备注" style="width: 150px; border: none;outline: none;">
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 32px;">消息置顶</span>
                        <el-switch v-model="value7" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 20px;">消息免打扰</span>
                        <el-switch v-model="value8" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                </el-drawer>
                <!-- 宁苗聊天内容 -->
                <div class="message-box-content-right-up">
                    <div class="message-box-content-right-up-head">宁苗
                        <el-icon class="openDrawer" @click="drawer = true">
                            <MoreFilled />
                        </el-icon>
                    </div>
                    <div class="message-box-content-right-up-content">
                        <span>{{ nowTime }}</span>
                        <div class="message-box-content-right-up-content-one">
                            <div class="message-box-content-right-up-content-one-up">
                                <img src="../assets/img/1.jpg" alt="">
                                <div>
                                    刘医生你好，我感冒了能吃冰激凌吗
                                </div>
                            </div>
                            <div></div>
                        </div>
                        <div class="message-box-content-right-up-content-two">
                            <div></div>
                            <div class="message-box-content-right-up-content-two-down">
                                <div>你猜</div>
                                <img src="https://cdn7.axureshop.com/demo/1881228/images/%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86/u5160.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-box-content-right-footer">
                    <el-input class="message-box-content-right-footer-textarea" style="border: none;resize: none;"
                        v-model="textarea" :rows="2" type="textarea" placeholder="请输入" />
                    <div class="message-box-content-right-footer-down">
                        <div>
                            <span>
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <ElementPlus />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>
                            </span>
                        </div>
                        <el-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>

            <!-- 帖浩东聊天框 -->
            <div class="message-box-content-right" v-if='thdShow'>
                <!-- 帖浩东弹出框 -->
                <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="300" height="500">
                    <div style="display: flex;">
                        <img src="../assets/img/5.jpg"
                            style="width: 50px; height: 50px; border-radius: 10px;margin-right: 20px; border: 1px solid #999;"
                            alt="">
                        <div style="display: flex;flex-direction: column;">
                            <span>帖浩东</span>
                            <span style="font-size: 13px; color: #2984F8;margin-top: 10px;">查看资料</span>
                        </div>
                    </div>
                    <div style="display: flex; margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 10px;">好友备注</span>
                        <input type="请输入备注" style="width: 150px; border: none;outline: none;">
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 32px;">消息置顶</span>
                        <el-switch v-model="value9" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="font-size: 13px; color: #999;margin-right: 20px;">消息免打扰</span>
                        <el-switch v-model="value10" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #cccccc" active-text="开启"
                            inactive-text="关闭" />
                    </div>
                </el-drawer>
                <!-- 帖浩东聊天内容 -->
                <div class="message-box-content-right-up">
                    <div class="message-box-content-right-up-head">帖浩东
                        <el-icon class="openDrawer" @click="drawer = true">
                            <MoreFilled />
                        </el-icon>
                    </div>
                    <div class="message-box-content-right-up-content">
                        <span>{{ nowTime }}</span>
                        <div class="message-box-content-right-up-content-one">
                            <div class="message-box-content-right-up-content-one-up">
                                <img src="../assets/img/1.jpg" alt="">
                                <div>
                                    刘医生你好，晚上回去振不振
                                </div>
                            </div>
                            <div></div>
                        </div>
                        <div class="message-box-content-right-up-content-two">
                            <div></div>
                            <div class="message-box-content-right-up-content-two-down">
                                <div>叮叮叮</div>
                                <img src="https://cdn7.axureshop.com/demo/1881228/images/%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86/u5160.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-box-content-right-footer">
                    <el-input class="message-box-content-right-footer-textarea" style="border: none;resize: none;"
                        v-model="textarea" :rows="2" type="textarea" placeholder="请输入" />
                    <div class="message-box-content-right-footer-down">
                        <div>
                            <span>
                                <el-icon>
                                    <Microphone />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <ElementPlus />
                                </el-icon>
                            </span>
                            <span>
                                <el-icon>
                                    <PictureFilled />
                                </el-icon>
                            </span>
                        </div>
                        <el-button type="primary">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'

const textarea = ref('')

const drawer = ref(false)

const input = ref('')

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)
const value4 = ref(true)
const value5 = ref(true)
const value6 = ref(true)
const value7 = ref(true)
const value8 = ref(true)
const value9 = ref(true)
const value10 = ref(true)

let activeItem = ref<number>(0)

let yzyShow = ref(true)
let yzyleft = ref(true)
let zxyShow = ref(false)
let zxyleft = ref(true)
let wcShow = ref(false)
let wcleft = ref(true)
let nmShow = ref(false)
let nmleft = ref(true)
let thdShow = ref(false)
let thdleft = ref(true)

let nowTime = ref('')
// 获取当前时间
let currentDate: Date = new Date();

// 获取小时和分钟
let currentHour: number = currentDate.getHours();
let currentMinute: number = currentDate.getMinutes();
nowTime.value = (currentHour < 10 ? '0' + currentHour : currentHour) + ":" + (currentMinute < 10 ? '0' + currentMinute : currentMinute)

console.log("当前时间：" + currentHour + ":" + currentMinute);

//yzy
const yzyMsg = () => {
    yzyleft.value = false
}
const yzy = () => {
    activeItem.value = 0;
    yzyShow.value = true
    zxyShow.value = false
    wcShow.value = false
    nmShow.value = false
    thdShow.value = false
}

//zxy
const zxyMsg = () => {
    zxyleft.value = false
}
const zxy = () => {
    activeItem.value = 1;
    zxyShow.value = true
    yzyShow.value = false
    wcShow.value = false
    nmShow.value = false
    thdShow.value = false
}

//wc
const wcMsg = () => {
    wcleft.value = false
}
const wc = () => {
    activeItem.value = 2;
    wcShow.value = true
    zxyShow.value = false
    yzyShow.value = false
    nmShow.value = false
    thdShow.value = false
}

//nm
const nmMsg = () => {
    nmleft.value = false
}
const nm = () => {
    activeItem.value = 3;
    nmShow.value = true
    zxyShow.value = false
    wcShow.value = false
    yzyShow.value = false
    thdShow.value = false
}

//thd
const thdMsg = () => {
    thdleft.value = false
}
const thd = () => {
    activeItem.value = 4;
    thdShow.value = true
    zxyShow.value = false
    wcShow.value = false
    nmShow.value = false
    yzyShow.value = false
}

</script>

<style lang='scss'>
// .el-input__inner {
//     border: none;
//     max-width: 150px;
// }

.message-box {
    width: 1150px;
    margin: auto;


    .custom-input {
        max-width: 150px;
        border: none;
    }

    .message-box-head {
        line-height: 65px;
        background-color: white;
        margin-bottom: 2px;
        color: rgba(51, 51, 51, 0.898039215686275);
        font-size: 18px;
        font-weight: 500;

        span {
            display: inline-block;
            width: 6px;
            height: 20px;
            background-color: rgba(41, 132, 248, 1);
            border-radius: 3px;
            margin: 0px 10px -4px 20px;
        }
    }

    .message-box-content {
        width: 100%;
        display: flex;

        .message-box-content-left {
            width: 300px;
            height: 800px;
            background-color: white;
            margin-right: 2px;

            .message-box-content-left-child {
                width: 100%;
                height: 80px;
                background-color: white;
                border-bottom: 2px solid #f2f7fb;
                display: flex;
                box-sizing: border-box;
                padding: 10px;
                align-items: center;

                .closeMsg {
                    display: none;
                    margin-right: -16px;
                    color: rgba($color: #000000, $alpha: .2);
                    font-weight: 700;
                }

                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    margin-right: 10px;
                    margin-left: 20px;
                }

                .message-box-content-left-right {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;

                    .message-box-content-left-right-up {
                        display: flex;
                        justify-content: space-between;
                        padding: 5px;

                        :first-child {
                            font-size: 15px;
                        }

                        :last-child {
                            font-size: 13px;
                            color: #999;
                        }
                    }

                    .message-box-content-left-right-down {
                        font-size: 14px;
                        color: #999;
                        padding: 5px;
                    }
                }
            }

            .message-box-content-left-child:hover .closeMsg {

                display: block;

            }

            .active {
                background-color: #f2f7fb;
            }
        }

        .message-box-content-right {
            flex-grow: 1;
            position: relative;

            .el-switch__core {
                width: 60px;
                height: 25px;
                border-radius: 15px;
            }

            .el-overlay {
                background-color: transparent;
                box-shadow: none;
                /* 设置遮罩层颜色为透明色 */
            }

            .el-overlay {
                position: absolute;
                height: 545px;
                margin-top: 52px;
                margin-right: 0px;
            }

            .message-box-content-right-up {
                .message-box-content-right-up-head {
                    width: 100%;
                    line-height: 50px;
                    background-color: white;
                    padding: 0 30px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;

                    .openDrawer {
                        margin-top: 15px
                    }

                    .openDrawer:hover {
                        cursor: pointer;
                    }
                }

                .message-box-content-right-up-content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 20px;

                    span {
                        width: 50px;
                        line-height: 22px;
                        background-color: rgba($color: #000000, $alpha: .2);
                        text-align: center;
                        color: white;
                        font-size: 13px;
                        border-radius: 10px;
                        margin-bottom: 25px;
                    }

                    .message-box-content-right-up-content-one {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;

                        .message-box-content-right-up-content-one-up {
                            width: 370px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            img {
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                            }

                            div {
                                width: 320px;
                                height: 50px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: white;
                                border-radius: 0 20px 20px 20px;
                                font-size: 14px;
                            }
                        }
                    }

                    .message-box-content-right-up-content-two {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;

                        .message-box-content-right-up-content-two-down {
                            width: 200px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            div {
                                width: 180px;
                                height: 50px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: #2984f8;
                                border-radius: 0 20px 20px 20px;
                                color: white;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }

            .message-box-content-right-footer {
                width: 100%;
                height: 200px;
                margin-top: 363px;
                background-color: white;

                .message-box-content-right-footer-textarea {
                    border: none;
                    margin-bottom: 80px;
                }

                .message-box-content-right-footer-down {
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    padding: 10px;

                    div {
                        span {
                            margin: 10px;
                        }
                    }

                    .el-button {
                        width: 80px;
                        height: 40px;
                    }
                }
            }
        }
    }
}
</style>